import React, {Component} from 'react'
import PropTypes from 'prop-types'

import CommentItem from '../comment-item/comment-item'
import './commentList.css'



export default class CommentList extends Component{

      // 是给组件类添加属性  而不是给组件对象添加属性
    static propTypes = {
        comments:PropTypes.array.isRequired,
        deleteComment:PropTypes.array.isRequired,
    }

    render() {

        const {comments, deleteComment} = this.props
        // console.log(comments)
        // 根据commlentList的长度 判断是否要删除
        const display = comments.length == 0 ? 'block' : 'none'

        return (
            <div className="col-md-8">
                <h3 className="reply">评论回复：</h3>
                <h2 style={{display}}>暂无评论，点击左侧添加评论！！！</h2>
                <ul className="list-group">
                    {
                        comments.map((comment, index) => <CommentItem comment={comment} key={index}
                            deleteComment={deleteComment} index={index}
                        />)
                    }
                </ul>
            </div>
        )
    }
}

/*CommentList.protoTypes = {
    comments:PropTypes.array.isRequired
}*/